<!--
 * @Author: 陆成杰
 * @Date: 2022-06-23 14:17:04
 * @LastEditTime: 2022-07-01 15:26:54
 * @LastEditors: 陆成杰
 * @FilePath: /boe/src/views/home/Home.vue
 * Copyright (c) ${now_year} by zucc-陆成杰, All Rights Reserved. 
-->
<template>
  <div class="home">
    <!-- 设备数量+节目数量+计划数量 -->
    <div class="header">
      <div class="header-item">
        <div class="header-item-img">
          <img src="../../assets/home/snumber.png" alt="" />
        </div>
        <div class="header-item-title">
          <div class="header-item-title-item1">设备数量</div>
          <div class="header-item-title-item2">{{ state.snumber }}</div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-item-img">
          <img src="../../assets/home/jnumber.png" alt="" />
        </div>
        <div class="header-item-title">
          <div class="header-item-title-item1">节目数量</div>
          <div class="header-item-title-item2">{{ state.jnumber }}</div>
        </div>
      </div>
      <div class="header-item">
        <div class="header-item-img">
          <img src="../../assets/home/hnumber.png" alt="" />
        </div>
        <div class="header-item-title">
          <div class="header-item-title-item1">计划数量</div>
          <div class="header-item-title-item2">{{ state.hnumber }}</div>
        </div>
      </div>
    </div>
    <!-- 设备状态+素材资源+设备分布 -->
    <div class="middle">
      <!-- 设备状态 -->
      <div class="middle-item1">
        <div class="middle-item1-title">
          <div class="middle-item1-title-l"></div>
          <div class="middle-item1-title-t">设备状态</div>
        </div>
        <div class="middle-item1-content">
          <!-- 圈 -->
          <DeviceStatus class="childrencircle1"></DeviceStatus>
          <!-- <el-tooltip
            content="离线  0台"
            raw-content
            effect="light"
          >
            <div class="circle">
              <div class="circle1"></div>
              <div class="circle1-content">
                <div style="margin-left: 3px; font-weight: 500">
                  {{ state.snumber }}
                </div>
                <div
                  style="margin-top: 10px; font-size: 14px; margin-left: 2px"
                >
                  台
                </div>
              </div>
            </div>
          </el-tooltip> -->
          <!-- 圈旁边的数据 -->
          <div class="datalist">
            <div style="display: flex">
              <div
                class="datalist-point"
                style="background-color: rgb(108, 116, 129)"
              ></div>
              <div>离线&nbsp;&nbsp;&nbsp;&nbsp;{{ state.offdevice }}台</div>
            </div>
            <div style="display: flex; margin-top: 20px">
              <div
                class="datalist-point"
                style="background-color: rgb(78, 203, 115)"
              ></div>
              <div>播放&nbsp;&nbsp;&nbsp;&nbsp;{{ state.startdevice }}台</div>
            </div>
            <div style="display: flex; margin-top: 20px">
              <div
                class="datalist-point"
                style="background-color: rgb(220, 187, 56)"
              ></div>
              <div>空闲&nbsp;&nbsp;&nbsp;&nbsp;{{ state.freedevice }}台</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 素材资源 -->
      <div class="middle-item1">
        <div class="middle-item1-title">
          <div class="middle-item1-title-l"></div>
          <div class="middle-item1-title-t">素材资源</div>
        </div>
        <div class="middle-item1-content">
          <!-- 圈 -->
          <Materials class="childrencircle2"></Materials>
          <!-- <el-tooltip
            content="图片  0KB"
            raw-content
            effect="light"
          >
          <div class="circle">
            <div class="circle2"></div>
            <div class="circle1-content">
              <div style="margin-left: 4px; font-weight: 500">
                {{ state.material }}
              </div>
              <div style="margin-top: 10px; font-size: 14px">KB</div>
            </div>
          </div>
          </el-tooltip> -->
          <!-- 圈旁边的数据 -->
          <div class="datalist">
            <div style="display: flex">
              <div
                class="datalist-point"
                style="background-color: rgb(220, 187, 56)"
              ></div>
              <div>图片&nbsp;&nbsp;&nbsp;&nbsp;{{ state.picture }}KB</div>
            </div>
            <div style="display: flex; margin-top: 20px">
              <div
                class="datalist-point"
                style="background-color: rgb(24, 144, 255)"
              ></div>
              <div>视频&nbsp;&nbsp;&nbsp;&nbsp;{{ state.redio }}B</div>
            </div>
            <div style="display: flex; margin-top: 20px">
              <div
                class="datalist-point"
                style="background-color: rgb(151, 95, 229)"
              ></div>
              <div>音频&nbsp;&nbsp;&nbsp;&nbsp;{{ state.audio }}B</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 设备分布 -->
      <div class="middle-item2">
        <div style="display: flex; justify-content: space-between">
          <div class="middle-item1-title">
            <div class="middle-item1-title-l"></div>
            <div class="middle-item1-title-t">设备分布</div>
          </div>
          <div class="middle-select">
            <select @change="chooseTeam($event)">
            <option
              :value="item"
              v-for="(item, index) in state.options"
              :key="index"
            >
              {{ item }}
            </option>
          </select>
          </div>
        </div>

        <div class="echarts">
          <Distribution></Distribution>
        </div>
      </div>
    </div>
    <!-- 计划审核提醒+事件记录 -->
    <div class="footer">
      <div class="footer-item1">
        <div class="middle-item1-title">
          <div class="middle-item1-title-l"></div>
          <div class="middle-item1-title-t">计划审核提醒</div>
        </div>
        <div>
          <div><PlanExamin></PlanExamin></div>
        </div>
      </div>
      <div class="footer-item2">
        <div class="middle-item1-title">
          <div class="middle-item1-title-l"></div>
          <div class="middle-item1-title-t">事件记录</div>
        </div>
        <div>
          <Record></Record>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import Distribution from "./home-children/Distribution.vue";
import PlanExamin from "./home-children/PlanExamin.vue";
import Record from "./home-children/Record.vue";
import DeviceStatus from "./home-children/DeviceStatus.vue";
import Materials from "./home-children/Materials.vue";
import { getThree, getDeviceState } from "../../axios/home";


const state = reactive({
  snumber: 0,
  jnumber: 0,
  hnumber: 0,
  material: 0,
  offdevice: 0,
  startdevice: 0,
  freedevice: 0,
  picture: 1024,
  redio: 735,
  audio: 580,
  options: ["分组", "机构"],
});

onMounted(() => {
  Three()
  DeviceState()
})

const Three = () => {
  getThree().then(res => {
    console.log(res)
    state.snumber = res.data.DeviceCnt
    state.jnumber = res.data.ShowCnt
    state.hnumber = res.data.PlanCnt
    console.log(state.snumber);
    
  })
};

const DeviceState = () => {
      getDeviceState().then((res) => {
        // console.log(res);
        state.offdevice = res.data.Offline;
        state.startdevice = res.data.Online;
        state.freedevice = res.data.All - res.data.Online;
      });
    };



</script>

<style lang="less" scoped>
// .home{
//   background-color: rgb(35, 39, 56);
// }
.header {
  display: flex;
  justify-content: space-around;
  // align-items: center;
  &-item {
    display: flex;
    // flex: 1;
    width: 32%;
    height: 80px;
    background-color: rgb(41, 45, 62);
    color: #fff;
    line-height: 80px;
    // text-align: center;
    &-img {
      margin: 15px;
    }
    &-img img {
      width: 50px;
      height: 50px;
    }
    &-title {
      // display: flex;
      &-item1 {
        height: 30px;
        margin-top: -15px;
      }
      &-item2 {
        height: 50px;
        font-size: 24px;
        font-weight: 600;
      }
    }
  }
}
.middle {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  &-item1 {
    width: 27.5%;
    height: 230px;
    background-color: rgb(41, 45, 62);
    &-title {
      display: flex;
      margin: 15px;
      &-l {
        width: 6px;
        height: 25px;
        background-color: rgb(24, 144, 255);
      }
      &-t {
        color: #fff;
        line-height: 25px;
        margin-left: 10px;
      }
    }
    &-content {
      display: flex;
    }
  }
  &-item2 {
    width: 40%;
    height: 230px;
    background-color: rgb(41, 45, 62);
    &-title {
      display: flex;
      margin: 15px;
      &-l {
        width: 6px;
        height: 25px;
        background-color: rgb(24, 144, 255);
      }
      &-t {
        color: #fff;
        line-height: 25px;
        margin-left: 10px;
      }
    }
  }
}
.footer {
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  &-item1 {
    width: 57%;
    height: 240px;
    background-color: rgb(41, 45, 62);
    &-title {
      display: flex;
      margin: 15px;
      &-l {
        width: 6px;
        height: 25px;
        background-color: rgb(24, 144, 255);
      }
      &-t {
        color: #fff;
        line-height: 25px;
        margin-left: 10px;
      }
    }
  }
  &-item2 {
    width: 40%;
    height: 300px;
    background-color: rgb(41, 45, 62);
    &-title {
      display: flex;
      margin: 15px;
      &-l {
        width: 6px;
        height: 25px;
        background-color: rgb(24, 144, 255);
      }
      &-t {
        color: #fff;
        line-height: 25px;
        margin-left: 10px;
      }
    }
  }
}
.circle {
  width: 190px;
  height: 150px;
}
.circle1 {
  width: 130px;
  height: 130px;
  background-color: rgb(108, 116, 129);
  border-radius: 50%;
  margin: 15px;
  margin-left: 30px;
  color: #fff;
  position: absolute;
  // text-align: center;
}
.circle1-content {
  position: relative;
  top: 55px;
  left: 85px;
  font-size: 20px;
  color: white;
}
.circle1:after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(41, 45, 62);
  position: relative;
  top: 15px;
  left: 15px;
}
.circle2 {
  width: 130px;
  height: 130px;
  background-color: rgb(220, 187, 56);
  border-radius: 50%;
  margin: 15px;
  margin-left: 30px;
  color: #fff;
  position: absolute;
}
.circle1-content {
  position: relative;
  top: 55px;
  left: 85px;
  font-size: 20px;
  color: white;
}
.circle2:after {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: rgb(41, 45, 62);
  position: relative;
  top: 15px;
  left: 15px;
}
.datalist {
  color: #fff;
  margin-top: 35px;
  font-size: 14px;
  &-point {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    // background-color: aqua;
    margin-top: 4px;
    margin-right: 7px;
  }
}
.m-2 {
  width: 120px;
  margin-top: 10px;
  margin-right: 30px;
  // color: #fff;
  // background-color: rgb(35, 39, 56);
}
.echarts {
  margin-top: -50px;
}
.childrencircle2,
.childrencircle1 {
  margin-top: -20px;
}
.middle-select{
  margin-right: 20px;
}
.middle-select select {
    width: 120px;
    height: 28px;
    margin-top: 25px;
    margin-left: 10px;
    background-color: rgb(35, 39, 56);
    border: none;
    color: #fff;
    padding-left: 10px;
    outline-color: rgb(24, 144, 255);
  }
</style>
